<template>
  <nav class="nav-bar">
    <div class="btn" v-for="(nav, i) in navs" :key="i">
      <span v-if="nav.hasChild">{{ nav.name }}</span>
      <span v-else @click="changePage(nav.page)">{{ nav.name }}</span>
      <div class="btn-items-box" v-if="nav.hasChild">
        <ul class="btn-items">
          <li v-for="(item, i) in nav.children" :key="i" @click="changePage(item.page)">{{ item.name }}</li>
        </ul>
      </div>
    </div>
  </nav>
  <div>
    <component :is="page"></component>
  </div>
</template>

<script>
import DefaultPage from "./views/DefaultPage.vue"
import SingleFileB from "./views/start/SingleFileB.vue"
// console.log(SingleFileB)
import ErrorPage from "./views/errorAndAssets/ErrorPage.vue"
import AssetsPage from "./views/errorAndAssets/AssetsPage.vue"
import AssetsBuildPage from "./views/errorAndAssets/AssetsBuildPage.vue"
import GlobalAndPart from "./views/style/GlobalAndPart.vue"
import DeepStyle from "./views/style/DeepStyle.vue"
import SassPage from "./views/style/SassPage.vue"
import BuildProjectPage from "./views/BuildProjectPage.vue"
import BaseAxios from "./views/ajax/BaseAxios.vue"
import InterceptorsAxios from "./views/ajax/InterceptorsAxios.vue"
import ModuleAxios from "./views/ajax/ModuleAxios.vue"
import ProxyAjax from "./views/ajax/ProxyAjax.vue"
import CompositionPage from "./views/composition/CompositionPage.vue"
import ComponentPage from "./views/composition/ComponentPage.vue"
import LifePage from "./views/composition/LifePage.vue"
import ThisPage from "./views/composition/ThisPage.vue"



export default {
  name: 'App',
  components: {
    DefaultPage,SingleFileB,ErrorPage,AssetsPage,AssetsBuildPage,
    GlobalAndPart,DeepStyle,SassPage,BuildProjectPage,BaseAxios,
    InterceptorsAxios,ModuleAxios,ProxyAjax,CompositionPage,ComponentPage,
    LifePage,ThisPage
  },
  data() {
    return {
      page: "ThisPage",
      navs: [
        { name: "默认页", hasChild: false, page: "DefaultPage" },
        {
          name: "启动和组成", hasChild: true, children: [
            { name: "启动过程", page: "A" },
            { name: "单文件组件-简单结构", page: "A" },
            { name: "单文件组件-注意事项", page: "SingleFileB" },
          ]
        },
        {
          name: "错误处理和静态资源", hasChild: true, children: [
            { name: "错误处理", page: "ErrorPage" },
            { name: "静态资源", page: "AssetsPage" },
            { name: "资源编译", page: "AssetsBuildPage" },
          ]
        },
        {
          name: "样式操作", hasChild: true, children: [
            { name: "全局样式和局部样式", page: "GlobalAndPart" },
            { name: "样式穿透", page: "DeepStyle" },
            { name: "动态样式", page: "SassPage" },
          ]
        },
        { name: "项目打包", hasChild: false, page:"BuildProjectPage" },
        {
          name: "异步请求", hasChild: true, children: [
            { name: "axios的基本使用", page: "BaseAxios" },
            { name: "axios的拦截器使用", page: "InterceptorsAxios" },
            { name: "axios的模块化", page: "ModuleAxios" },
            { name: "开发代理服务器设置", page: "ProxyAjax" },
          ]
        },
        {
          name:"组合式API",hasChild: true, children: [
            { name: "基本语法定义", hasChild: false, page:"CompositionPage" },
            { name: "组件语法定义", hasChild: false, page:"ComponentPage" },
            { name: "组件生命周期定义", hasChild: false, page:"LifePage" },
            { name: "组合式API的实例获取", hasChild: false, page:"ThisPage" },
          ]
        },
        {
          name: "路由", hasChild: true, children: [
            
          ]
        },
        {
          name: "中央仓库", hasChild: true, children: [
            
          ]
        },
      ]
    }
  },
  methods: {
    changePage(page) {
      // console.log(page)
      this.page = page;
    }
  },
}
</script>

<style>

.nav-bar {
  background-color: #545c64;
  color: #e9ecf4;
  font-size: 0px;
  padding: 0px 20px;
  box-shadow: 0px 0px 4px #6e7276;
  position: sticky;
  top: 0px;
  z-index: 99;
}

.nav-bar .btn {
  display: inline-block;
  /* min-width: 100px; */
  text-align: center;
  font-size: 16px;
  margin-right: 20px;
  padding: 10px 0px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  border-bottom: 4px solid transparent;
  position: relative;
}

.nav-bar .btn:hover {
  border-color: #f7ca4b;
}

.nav-bar .btn:hover span {
  color: #f7ca4b;
}

.nav-bar .btn:hover .btn-items {
  display: block;
}

.nav-bar .btn .btn-items-box {
  position: absolute;
  padding: 16px 0px 0px 0px;
  transform: translate(14px, 0px);
  z-index: 99;
}

.nav-bar .btn .btn-items {
  /* position: absolute; */
  background-color: #727981;
  /* transform: translate(40px,24px); */
  margin: 0px;
  padding: 0px;
  list-style: none;
  min-width: 200px;
  text-align: left;
  padding: 10px 0px;
  border-radius: 4px;
  box-shadow: 0px 0px 2px white;
  display: none;
}

.nav-bar .btn .btn-items li {
  padding: 10px 14px;
  font-size: 16px;
  cursor: pointer;
}

.nav-bar .btn .btn-items li:hover {
  background-color: #434a50;
}
</style>
